<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js"></script>
		<script src="js/elementui.js"></script>
		<script src="js/axios.min.js"></script>
		<!-- 处理参数问题工具 -->
		<script src="js/qs.min.js"></script>
		<link rel="stylesheet" href="css/elementui.css" />
		<style>
			body {
				background-color: #00FFFF;
			}

			#app {
				margin: 0;
			}
			#main{
				width: 1000px;
				height: 400px;
				position: absolute;
				top: 200px;
				left: 360px;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<div id="main">
				<el-form :rules="rules" :model="userBean" ref="userBean" status-icon label-width="100px" class="demo-ruleForm" >
					<el-row>
						<el-col :span="12">
							<el-form-item prop="username">
								<el-input prefix-icon="el-icon-user-solid" type="text" v-model="userBean.username"
									autocomplete="off"></el-input>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="12">
							<el-form-item prop="userpwd">
								<el-input prefix-icon="el-icon-s-goods" type="password" v-model="userBean.userpwd"
									autocomplete="off"></el-input>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="12" :offset="3">
							<el-form-item>
								<el-button type="primary" @click="login()">提交</el-button>
								<el-button @click="resetForm('userBean')">重置</el-button>
							</el-form-item>
						</el-col>
					</el-row>
				
				</el-form>
				
			</div>
		</div>
	</body>
	<script>
		var app = new Vue({
			el: "#app",
			data: {
				userBean: {
					username: "",
					userpwd: ""
				},
				rules:{
					username:[
						  { required: true, message: '请输入用户名', trigger: 'blur' },
						  { min: 1, max: 10, message: '长度在 1 到 10个字符', trigger: 'blur' }
					],
					userpwd:[
						 { required: true, message: '请输入密码', trigger: 'blur' }
					]
					
				}
			},
			methods: {
				login:function(){
					console.log("处理前的userBean：：：")
					console.log(this.userBean)
					console.log("处理后的UserBean:::")
					console.log(Qs.stringify(this.userBean))
					// 提交后的业务处理				
					axios.post('http://localhost:8086/login',Qs.stringify(this.userBean))
					  .then(function (response) {
						  // 若响应的结果为ok
					    if(response.data==="ok"){
							// 跳转到登录成功的页面中
							window.location.href="welcome.html"
						}else{
							window.location.href="index.html"
						}
						
					  })
					  .catch(function (error) {
					    console.log(error);
					  });
				},
				resetForm(formName) {
					// 重置表单
					this.$refs[formName].resetFields();
				}
			}

		})
	</script>
</html>
